<template>
  <div class="info-container">
    <h3>标题</h3>
    <p class="subtitle">
      <span>发表时间</span>
      <span>点击次数</span>
    </p>
    <hr>

    <!--缩略图-->
    <div class="min-img">
      <vue-preview class="img" :slides="list" @close="handleClose"></vue-preview>
    </div>

    <!--内容区域-->
    <div class="content">图片的详细信息显示</div>

    <!--评论子组件-->
    <cmt-box></cmt-box>

  </div>

</template>

<script>
// 导入评论子组件
import comment from '../subcomponents/Comment'
export default {
  name: 'photoinfo',
  data () {
    return {
      id: this.$route.params.id,
      list: [
        {
          src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
          msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
          alt: 'picture1',
          title: 'Image Caption 1',
          w: 600,
          h: 400
        },
        {
          src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
          msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
          alt: 'picture2',
          title: 'Image Caption 2',
          w: 1200,
          h: 900
        }
      ]
    }
  },
  methods: {

  },
  components: {
    'cmt-box': comment
  }

}
</script>

<style lang="scss" scoped>
  .info-container{
    padding: 3px;
    h3{
      color: #26A2FF;
      font-size: 15px;
      text-align: center;
      margin: 15px 0;
    }
    .subtitle{
      display: flex;
      justify-content: space-between;
    }
    .content{
      font-size: 13px;
      line-height: 20px;
    }
  }
  .min-img{
    .img{
      padding: 10px;
      box-shadow: 0 0 9px #ccc;
    }
  }

</style>
